<template>
  <div>
    <el-container>
      <el-header style="background-color: #4a4c5b;height:70px;">
        <el-container style="height:100%">
          <el-aside
            style="display:flex;justify-content:flex-start;align-items:center;height:100%;width:300px"
          >
            <span style="font-size:25px;color:#fff;margin-left:20px">新职通机构端</span>
          </el-aside>
          <el-main style="display:flex;justify-content:flex-end;align-items:center;height:100%">
            <i class="iconfont icon1 pointer" style="font-size:25px;color:#fff" @click="goToFirst"></i>
            <span style="font-size:20px;color:#fff;margin-right:20px" class="pointer" @click="goToFirst">返回首页</span>
          </el-main>
        </el-container>
      </el-header>
      <el-main id="loginMainBox" style="padding-top: 20px;">
        <el-card class="loginbox">
          <div class="imgCol">
            <el-form :model="form" status-icon :rules="rules" ref="form">
              <el-form-item prop="email" style="w">
                <el-input v-model="form.email" placeholder="请输入邮箱..."  @keyup.enter="login">
                  <i slot="suffix" class="iconfont iconyouxiang"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input v-model="form.code" placeholder="请输入密码..." show-password  @keyup.enter="login">
                  <i slot="suffix" class="iconfont icon3"></i>
                </el-input>
              </el-form-item>
              <button class="btnLogin pointer" @click="login">机构登录</button>
              <!-- <button v-show="loginReady" class="btnLogin pointer" @click="goToNext">下一步</button>
              <button v-show="!loginReady" class="btnNotLogin pointer" disabled>下一步</button>-->
            </el-form>
          </div>

          <div class="end" style="width:420px;margin-top:15px">
            <span class="registWords pointer" @click="goToRegist">立即注册</span>
            <el-divider direction="vertical"></el-divider>
            <span class="registWords pointer" @click="goToForget">忘记密码</span>
          </div>
        </el-card>
      </el-main>
      <el-footer
        style="text-align: center;width: 100%;white-space: nowrap;color: #A7A7A7;font-size: 10px;line-height: 60px;"
      >
        <div>www. xinzhitong. com版权所有新职通一新时期务工人员转 型升级助推者备案号粤ICP备10054973号-5</div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginReady: false,
      form: {
        email: "",
        code: ""
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    var body = document.getElementById("loginMainBox");
    console.log(body);
    var height = document.documentElement.clientHeight - 120;
    console.log(height.toString() + "px");
    if (height <= 700) height = 700;
    body.style.height = height.toString() + "px";
    console.log(body.style.height);
  },
  methods: {
    goToFirst(){
      window.location.href = "http://www.hangzhourunshi.cn/#/"

    },
    goToRegist() {
      this.$router.push({
        path: "/registStep1"
      });
    },
    goToForget() {
      this.$router.push({
        path: "/forgetStep1"
      });
    },
    login() {
      // console.log("yes");
      this.$refs["form"].validate(valid => {
        if (valid) {
          var URL = this.IP + "/user/login";
          console.log(URL);
          this.$ajax({
            method: "post",
            url: URL,
            data: {
              username: this.form.email,
              password: this.form.code
            }
          })
            .then(response => {
              console.log(response.data);
              var code = response.data.code;
              if (code == 0) {
                this.$router.push({
                  path: "/home/recent"
                });
              } else {
                console.log(response.data.msg);
                this.$message.error(response.data.msg);
              }
            })
            .catch(error => {
              console.log(error);
              //Toast(error);
            });
        } else {
          console.log("error submit!!");
        }
      });
    }
  }
};
</script>
<style>
#loginMainBox {
  background-image: url(../../assets/login/loginbgi.jpg);
  background-size: cover;
}
.loginbox {
  width: 500px;
  margin-top: 10%;
  margin-left: 60%;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnLogin {
  width: 400px;
  height: 40px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-style: none;
  border-radius: 5px;
}
.el-mian,.el-header,.el-container,.el-aside,.el-footer{
  padding: 0px;
  margin: 0px;
}
.html{
  padding: 0px;
}
.registWords {
  color: rgb(105, 110, 125);
  font-size: 14px;
}
.end {
  display: flex;
  justify-content: flex-end;
}
.pointer {
  cursor: pointer;
}
</style>